<template>
  <div class="singer">
    <span>筛选：</span>
    <span class="font" :class="{ active: currentIndex === index }" v-for="(item, index) in font" :key="index" @click="itemClick(item, index)">{{ item }}</span>
    <MenuList :list="list" @itemClick="artistClick"></MenuList>
  </div>
</template>

<script>
import MenuList from '@/components/list/MenuList';
export default {
  data() {
    return {
      font: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      currentIndex: 0,
      list: [],
    };
  },
  computed: {},
  created() {
    this.getArtistList('热门');
  },
  components: { MenuList },
  methods: {
    itemClick(item, index) {
      this.list = [];
      this.currentIndex = index;
      this.getArtistList(item);
    },
    async getArtistList(item) {
      if (item === '热门') {
        item = -1;
      }
      const res = await this.$request('/artist/list', { initial: item, type: -1, area: -1 });
      this.list = res.artists;
    },
    artistClick(id) {
      this.$router.push('/artistdetail/' + id);
    },
  },
};
</script>

<style scoped lang='scss'>
.singer {
  font-size: 13px;
  color: #606266;
  .font {
    display: inline-block;
    width: 50px;
    text-align: center;
    margin: 7px 0;
    padding: 3px;
    border-right: solid 1px $gray;
    cursor: pointer;
    &:hover {
      color: black;
    }
  }
  .active {
    color: $themeColor;
    border-radius: 10px;
    background-color: rgba(255, 0, 0, 0.129);
  }
}
</style>